<template>
<div id="da">
    <!-- <div id="r-result">
        请输入:
        <input type="text" id="suggestId" size="20" value="百度" style="width:150px;" />
    </div>-->
    <div id="r-result">
        <el-input v-model="input" placeholder="通过楼盘地址查找坐标" class="shuru" id="suggestId"></el-input>
        <!-- <el-button style="margin-left:16px" type="primary">查询</el-button> -->
    </div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:100px; display:none;"></div>
    <div>
        <div id="map"></div>
    </div>
</div>
</template>

<script>
export default {
    name: "baidumap",
    data() {
        return {
            map: "",
            latitude: "30.579899",
            longitude: "104.269955",
            input: "",
            // longlat: "",
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        // 创建地图
        initMap() {
            this.map = new BMap.Map("map", {
                enableMapClick: false
            });
            let point = new BMap.Point(this.longitude, this.latitude);
            this.map.centerAndZoom(point, 17);
            // this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            this.map.addControl(new BMap.NavigationControl());
            var marker = new window.BMap.Marker(point); // 创建标注
            this.map.addOverlay(marker); // 将标注添加到地图中
            this.ccc();
        },

        ccc() {
            var _this = this;

            function G(id) {
                return document.getElementById(id);
            }
            var ac = new BMap.Autocomplete({
                input: "suggestId",
                location: _this.map,
            }); //建立一个自动完成的对象

            ac.addEventListener("onhighlight", function (e) {
                //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value =
                        _value.province +
                        _value.city +
                        _value.district +
                        _value.street +
                        _value.business;
                }
                str =
                    "FromItem<br />index = " +
                    e.fromitem.index +
                    "<br />value = " +
                    value;
                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value =
                        _value.province +
                        _value.city +
                        _value.district +
                        _value.street +
                        _value.business;
                }
                str +=
                    "<br />ToItem<br />index = " +
                    e.toitem.index +
                    "<br />value = " +
                    value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {
                //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue =
                    _value.province +
                    _value.city +
                    _value.district +
                    _value.street +
                    _value.business;
                G("searchResultPanel").innerHTML =
                    "onconfirm<br />index = " +
                    e.item.index +
                    "<br />myValue = " +
                    myValue;

                setPlace();
            });

            function setPlace() {
                _this.map.clearOverlays(); //清除地图上所有覆盖物
                function myFun() {
                    // pp是搜索后地点的经纬度
                    var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                    _this.map.centerAndZoom(pp, 15);
                    _this.map.addOverlay(new BMap.Marker(pp)); //添加标注

                    console.log("经度：" + pp.lng + "--" + "纬度" + pp.lat);
                    let longlat = pp.lng + "," + pp.lat;
                    _this.$emit("mapfun", longlat);
                }
                var local = new BMap.LocalSearch(_this.map, {
                    //智能搜索
                    onSearchComplete: myFun,
                });
                local.search(myValue);
            }
        },
    },
    computed: {},
};
</script>

<style lang="less" scoped>
#map {
    width: 95%;
    height: 300px;
    margin: 0 auto;
}

#da {
    width: 100%;
    height: 300px;
    margin: auto;
}

.shuru {
    width: 400px;
    margin: 8px 0 8px 8px;
}
</style>
